<template>
  <Card class="e-content-wrap" :class="{ 'body-padding': bodyNoPadding }">
    <template #header v-if="title||$slots.title">
      <div class="w-full flex justify-between items-center font-style">
        <slot name="title">
          <span class="title">{{ title }}</span>
        </slot>
      </div>
    </template>
    <slot></slot>
  </Card>
</template>
<script setup lang="ts">
  import { propTypes } from '@/utils/propTypes'
  defineOptions({ name: 'EContentWrap' })

  defineProps({
    title: propTypes.string.def(''),
    bodyNoPadding: propTypes.bool.def(false) // 是否开启body  noPadding
  })
</script>
<style scoped lang="scss">
  .e-content-wrap {
    :deep(.el-card__header) {
      height: 56px;
      line-height: 56px;
      padding: 0 20px;
      display: flex;
      .font-style {
        font-family: PingFang SC;
        font-size: 18px;
        font-weight: 500;
        text-align: left;
        text-underline-position: from-font;
        text-decoration-skip-ink: none;
        color: #000000;
      }
      .title {
        font-family: PingFang SC;
        font-size: 18px;
        font-weight: 500;
        line-height: 26px;
        text-align: left;
        text-underline-position: from-font;
        text-decoration-skip-ink: none;
        color: #000000;
      }
    }
    :deep(.el-card__body) {
      padding: 20px;
    }
  }
  .body-padding {
    :deep(.el-card__body) {
      padding: 0 !important;
    }
  }
</style>
